<template>
  <div class="task-creation-success">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <span class="breadcrumb-item">教学任务</span>
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-item current">创建教学任务</span>
    </div>

    <!-- 页面标题 -->
    <h1 class="page-title">创建教学任务</h1>

    <!-- 成功反馈区域 -->
    <div class="success-feedback">
      <!-- 等待状态 -->
      <div v-if="!isProcessingComplete" class="processing-status">
        <!-- 加载图标 -->
        <div class="loading-icon">
          <div class="spinner"></div>
        </div>

        <!-- 等待状态文本 -->
        <div class="status-content">
          <h2 class="status-title">任务创建中</h2>
          <p class="status-description">试卷解析在后台解析中，请耐心等待</p>
        </div>
      </div>

      <!-- 成功状态 -->
      <div v-else class="success-status">
        <!-- 成功图标 -->
        <div class="success-icon">
          <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="32" cy="32" r="32" fill="#52C41A" />
            <path d="M22 32L28 38L42 24" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </div>

        <!-- 成功状态文本 -->
        <div class="status-content">
          <h2 class="status-title">教学任务创建成功</h2>
          <p class="status-description">教学任务创建成功，可尝试继续创建教学任务</p>
        </div>

        <!-- 操作按钮组 -->
        <div class="action-buttons">
          <button class="btn btn-primary" @click="handleContinueCreate">继续创建任务</button>
          <button class="btn btn-secondary" @click="handleCreateNewTask">新建其他任务</button>
          <button class="btn btn-tertiary" @click="handleViewTasks">返回列表</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()

// 处理状态
const isProcessingComplete = ref(false)

// 模拟处理过程
onMounted(() => {
  // 模拟后台处理时间（3秒后显示成功状态）
  setTimeout(() => {
    isProcessingComplete.value = true
  }, 3000)
})

// 处理继续创建任务
const handleContinueCreate = () => {
  ElMessage.success('继续创建任务')
  // 可以跳转到任务创建页面或其他相关页面
  router.push('/teacher/teaching-tasks/create')
}

// 处理新建其他任务
const handleCreateNewTask = () => {
  ElMessage.success('新建其他任务')
  // 跳转到任务创建页面
  router.push('/teacher/teaching-tasks/create')
}

// 处理返回列表
const handleViewTasks = () => {
  // 获取任务名称和任务ID
  const taskName = route.query.taskName as string || '教学任务'
  const taskId = route.query.taskId as string
  
  console.log('返回任务列表，任务信息:', { taskName, taskId })
  
  // 跳转到任务列表页面，并传递成功信息
  router.push({
    path: '/teacher/teaching-tasks',
    query: {
      newTaskCreated: 'true',
      taskName: taskName,
      taskId: taskId,
      refresh: 'true'
    }
  })
}
</script>

<style scoped>
.task-creation-success {
  padding: 0;
  min-height: 100%;
  background: #f5f7fa;
}

/* 面包屑导航 */
.breadcrumb {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  font-size: 14px;
  color: #666;
}

.breadcrumb-item {
  color: #666;
}

.breadcrumb-item.current {
  color: #303133;
  font-weight: 500;
}

.breadcrumb-separator {
  margin: 0 8px;
  color: #c0c4cc;
}

/* 页面标题 */
.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 32px 0;
}

/* 成功反馈区域 */
.success-feedback {
  background: #fff;
  border-radius: 12px;
  padding: 60px 40px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  max-width: 600px;
  margin: 0 auto;
}

/* 处理状态 */
.processing-status {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 加载图标 */
.loading-icon {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}

.spinner {
  width: 64px;
  height: 64px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #409EFF;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 成功图标 */
.success-icon {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}

/* 状态内容 */
.status-content {
  margin-bottom: 40px;
}

/* 成功状态 */
.success-status {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.status-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 12px 0;
}

.status-description {
  font-size: 16px;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

/* 操作按钮组 */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn {
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid transparent;
  min-width: 120px;
}

.btn-primary {
  background: #409EFF;
  color: #fff;
  border-color: #409EFF;
}

.btn-primary:hover {
  background: #66b1ff;
  border-color: #66b1ff;
}

.btn-secondary {
  background: #fff;
  color: #606266;
  border-color: #dcdfe6;
}

.btn-secondary:hover {
  background: #f5f7fa;
  border-color: #c0c4cc;
  color: #409EFF;
}

.btn-tertiary {
  background: #fff;
  color: #909399;
  border-color: #e4e7ed;
}

.btn-tertiary:hover {
  background: #f5f7fa;
  border-color: #c0c4cc;
  color: #606266;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .success-feedback {
    padding: 40px 24px;
    margin: 0 16px;
  }

  .action-buttons {
    flex-direction: column;
    align-items: center;
  }

  .btn {
    width: 100%;
    max-width: 200px;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 20px;
  }

  .status-title {
    font-size: 18px;
  }

  .status-description {
    font-size: 14px;
  }
}
</style>